<template>
  <div class="product">
    <product-param>
      <template v-slot:buy>
        <button class="btn" @click="buy">立即购买</button>
      </template>
    </product-param>
    <div class="content">
      <div class="item-bg">
        <h2>小米<span>8</span></h2>
        <h5>8周年旗舰版</h5>
        <p class="param">
          <a href="javascript:;">全球首款双频 GP</a><span>|</span>
          <a href="javascript:;">骁龙845</a><span>|</span>
          <a href="javascript:;">AI 变焦双摄</a><span>|</span>
          <a href="javascript:;">红外人脸识别变焦双摄</a>
        </p>
        <div class="price">
          <p class="new-price"> ¥<span>2599</span></p>
          <p class="old-price"> ¥<span><s>2999</s></span></p>
        </div>
      </div>

      <div class="item-bg2"></div>
      <div class="item-bg3"></div>

      <div class="swiper-box">
        <swiper :options="swiperOption">
          <swiper-slide><img src="../../public/imgs/product/gallery-2.png" alt=""></swiper-slide>
          <swiper-slide><img src="../../public/imgs/product/gallery-3.png" alt=""></swiper-slide>
          <swiper-slide><img src="../../public/imgs/product/gallery-4.png" alt=""></swiper-slide>
          <swiper-slide><img src="../../public/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../../public/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <p> 小米8 AI变焦双摄拍摄</p>
      </div>

      <div class="item-video">
        <h2> 60帧超慢动作摄影 <br>慢慢回味每一瞬间的精彩 </h2>
        <h4> 后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br>
          更能AI 精准分析视频内容，15个场景智能匹配背景音效。 </h4>
        <div class="video-bg" @click="showSlide = true"></div>
        <div class="video-box">
          <div class="overlay" v-if="showSlide"></div>
          <div class="video" :class="{'slide' : showSlide}">
            <span class="icon-close" @click="showSlide = false"></span>
            <video src="/imgs/product/video.mp4" controls muted autoplay></video>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import ProductParam from "../components/ProductParam";
  import {Swiper, SwiperSlide} from 'vue-awesome-swiper';
  import 'swiper/css/swiper.min.css'

  export default {
    name: "product",
    data() {
      return {
        showSlide: false,
        swiperOption: {
          autoplay: true,
          slidesPerView: 3, // 设置slider容器能够同时显示的slides数量
          spaceBetween: 30,//在slide之间设置距离（单位px）
          freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
          pagination: {//使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式
            el: '.swiper-pagination',//分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，
            clickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
          }
        },
      }
    },
    methods: {
      buy() {
        let id = this.$route.params.id;
        this.$router.push(`/detail/${id}`);
      }
    },
    components: {
      Swiper,
      SwiperSlide,
      ProductParam
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";
  @import "../assets/scss/mixin";

  .product {
    button {
      margin-left: 10px;
    }

    .content {
      .item-bg {
        text-align: center;
        height: 718px;
        background: url("../../public/imgs/product/product-bg-1.png") no-repeat center;
        background-size: contain;

        h2 {
          font-size: $fontA;
          color: $colorB;
          padding-top: 55px;
          font-weight: 600;

          span {
            font-size: 99px;
            margin-left: 10px;
          }
        }

        h5 {
          font-size: $fontE;
          color: $colorB;
          letter-spacing: 10px;
        }

        p.param {
          padding-top: 20px;

          a {
            color: $colorB;
            font-size: $fontI;
          }

          span {
            margin: 0 15px;
          }
        }

        .price {
          padding-top: 40px;

          p {
            display: inline-block;
            color: $colorB;
          }

          p.new-price {
            font-size: 30px;

            span {
              font-size: $fontB;
            }
          }

          p.old-price {
            margin-left: 11px;
            font-size: 20px;

            s {
              font-size: $fontD;
            }
          }
        }
      }

      .item-bg2 {
        height: 346px;
        margin: 38px 0;
        background: url("../../public/imgs/product/product-bg-2.png") no-repeat 50%;
        background-size: 1226px 397px;
      }

      .item-bg3 {
        height: 638px;
        margin-bottom: 36px;
        background: url("../../public/imgs/product/product-bg-3.png") no-repeat center;
        background-size: cover;
      }

      .swiper-box {
        margin: 36px auto 52px;
        text-align: center;

        .swiper-container {
          img {
            width: 100%;
            height: 100%;
          }
        }

        p {
          font-size: 18px;
          color: $colorB;
          padding-top: 20px;
        }
      }

      .item-video {
        background-color: #070708;
        height: 1044px;
        margin-bottom: 78px;
        text-align: center;

        h2 {
          font-size: 60px;
          color: $colorG;
          padding-top: 82px;
          letter-spacing: 2px;
        }

        h4 {
          padding-top: 47px;
          font-size: $fontE;
          color: $colorG;
          font-weight: normal;
        }

        .video-bg {
          width: 1226px;
          height: 540px;
          margin: 58px auto 0;
          background: url("../../public/imgs/product/gallery-1.png") no-repeat center;
          background-size: cover;
          cursor: pointer;
        }

        .video-box {
          .overlay {
            @include position(fixed);
            background-color: $colorB;
            opacity: .4;
            z-index: 10;
          }

          /*@keyframes slideDown {
            from {
              top: -50%;
              opacity: 0;
            }
            to {
              top: 50%;
              opacity: 1;
            }
          }

          @keyframes slideUp {
            from {
              top: 50%;
              opacity: 1;
            }
            to {
              top: -50%;
              opacity: 0;
            }
          }*/

          .video {
            position: fixed;
            top: -50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1000px;
            height: 536px;
            z-index: 10;
            opacity: 0;
            transition: all .6s;

            &.slide {
              top: 50%;
              opacity: 1;
            }

            /*&.slideDown {
              animation: slideDown .6s linear;
              top: 50%;
            }

            &.slideUp {
              animation: slideUp .6s linear;
            }*/

            .icon-close {
              position: absolute;
              top: 20px;
              right: 20px;
              cursor: pointer;
              z-index: 11;
              @include bgImg(20px, 20px, '/imgs/icon-close.png');
            }

            video {
              width: 100%;
              height: 100%;
              object-fit: cover;
              outline: none;
            }
          }
        }

      }
    }
  }
</style>
